<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        全选
        <input type="checkbox" @change="handleChange()" v-model="isAllChecked">
        
        商品列表
        <ul v-for="shop,index in shopList" :key="index"> 
            <li>
                <input type="checkbox" v-model="checkgroup" :value="shop" @change="handleLiChange()">
                name:{{ shop.name }} ---
                price:{{ shop.price }} ---
                number:{{ shop.number }}

                <button @click="shop.number++">
                    +
                </button>
                <button @click="shop.number === 0 ? shop.number = 0 : shop.number--">
                    -
                </button>
                <button @click="del(shop,index)">
                    del
                </button>             
            </li>
        </ul>

        购物车：
        {{ checkgroup }}
        <p>总金额计算：{{ getSum }}</p>
    </div>

    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                isAllChecked: false,
                checkgroup: [],
                shopList: [
                    { id: "1", name: "商品1", price: 10, number: 1 },
                    { id: "2", name: "商品2", price: 20, number: 2 },
                    { id: "3", name: "商品3", price: 30, number: 3 }
                ],
            },
            methods: {
                handleChange(){
                    this.checkgroup = this.isAllChecked ? this.shopList : []
                },
                handleLiChange(){
                    this.isAllChecked = this.checkgroup.length === this.shopList.length ? true : false
                },
                del(shop,index){
                    this.shopList.splice(index,1)
                    for(let i=0; i<this.checkgroup.length; i++){
                        if(this.checkgroup[i] === shop){
                            this.checkgroup.splice(i,1)
                        }
                    }
                }
            },
            computed: {
                getSum(){
                    return this.checkgroup[0] ? this.checkgroup.map(item => item.price * item.number).reduce( (a,b) => a+b ) : ''
                }
                    
            }
        })
    </script>
</body>
</html>